<template>
  <a-card>
    <a-form :model="queryParams" layout="inline" ref="queryParamsRef">
      <div class="flex flex-wrap space-x-4">

        <a-form-item
            label="缴费日期"
            name="paymentDate"
        >
          <a-date-picker
              value-format="YYYY-MM-DD"
              v-model:value="queryParams.paymentDate">
          </a-date-picker>
        </a-form-item>
        <a-form-item
            label="缴费状态"
            name="status"
            :rules="[{ required: true, message: '请输入缴费状态' }]"
        >
          <a-select
              placeholder="请输入缴费状态"
              style="width: 250px"
              :options="Object.keys(commonDict.paymentStatus).map(x => ({label:commonDict.paymentStatus[x],value:x}))"
              v-model:value="queryParams.status"></a-select>
        </a-form-item>
        <div class="space-x-2">
          <a-button type="primary" @click="paymentManagementStore.getPaymentManagementPage(queryParams)">查询</a-button>
          <a-button @click="resetQuery">重置</a-button>
        </div>
      </div>
    </a-form>
  </a-card>
</template>

<script setup>
import {ref} from 'vue';
import {usePaymentManagementStore} from '@/stores/paymentManagementStore.js';
import * as commonDict from '@/utils/commonDict.js';

const paymentManagementStore = usePaymentManagementStore()

const queryParamsRef = ref(null)
const queryParams = ref({
  paymentDate: '',
  status: undefined,
})

function resetQuery() {
  queryParamsRef.value.resetFields()
  paymentManagementStore.getPaymentManagementPage(queryParams)
}

</script>

<style scoped>

</style>
